<template>
  <div>
    <Table ref="table" :columns="columns" :fuc="pageMenu" :formState="formState" @reset="reset">
      <template #form>
        <FormItem label="标题" name="title">
          <Input v-model:value="formState.title" allow-clear placeholder="标题" />
        </FormItem>
        <FormItem label="名称" name="name">
          <Input v-model:value="formState.name" allow-clear placeholder="名称" />
        </FormItem>
        <!-- <FormItem label="上级菜单" name="parentId" style="width: 200px">
          <Select v-model="formState.parentId" allow-clear placeholder="上级菜单">
            <SelectOption value="KQSY-CLOUD">KQSY-CLOUD</SelectOption>
          </Select>
        </FormItem> -->
      </template>
      <template #toolBtn>
        <Button type="primary" @click="onAddBtn">添加</Button>
      </template>
      <template #operation="{ record }">
        <Space>
          <a class="red" @click="handleDelete(record)">删除</a>
        </Space>
      </template>
    </Table>

    <!-- 新增 -->
    <Drawer
      title="新增菜单"
      placement="right"
      :visible="addVisible"
      @close="onAddClose"
      width="500"
    >
      <Add v-if="addVisible" @on-success="handleSuccess" />
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { pageMenu, del } from '/@/api/sys/menu'
  import { Table } from '/@/components/Table'
  import { FormItem, Input, Button, Space, Modal, Drawer, message } from 'ant-design-vue'
  import Add from './Add.vue'

  const table: any = ref(null)

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '上级标题',
      dataIndex: 'parentTitle',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '路径',
      dataIndex: 'path',
    },
    {
      title: '组件',
      dataIndex: 'component',
    },
    {
      title: '图标',
      dataIndex: 'icon',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ]

  const formState = ref({
    title: '',
    name: '',
    parentId: '',
  })

  const reset = () => {
    formState.value = {
      title: '',
      name: '',
      parentId: '',
    }
  }

  const handleDelete = (record: any) => {
    Modal.confirm({
      content: '确认要删除吗？',
      async onOk() {
        del(record.id).then(() => {
          // message.success('操作成功')
          table.value.handleQuery()
        })
      },
    })
  }

  const addVisible = ref(false)
  const onAddBtn = () => {
    addVisible.value = true
  }
  const onAddClose = () => (addVisible.value = false)
  const handleSuccess = () => {
    onAddClose()
    message.success('操作成功')
    table.value.handleQuery()
  }
</script>
